<template>
	<view class="qr_container">
		<view class="qrcode">
			<view class="qrcode_box">
				<!-- #ifndef MP-ALIPAY -->
				<canvas style="width: 200px; height: 200px;" canvas-id="couponQrcode"></canvas>
				<!-- #endif -->
				<!-- #ifdef MP-ALIPAY -->
				<canvas style="width: 200px; height: 200px;" id="couponQrcode"></canvas>
				<!-- #endif -->
			</view>
			<view>
				<text class="qr_txt">姓名：{{obj.empName}}</text>
				<text class="qr_txt">卡号：{{obj.cardNo}}</text>
				<text class="qr_txt">消费金额：{{obj.amount}}</text>
				<text class="qr_txt">账户余额：{{obj.cashBalance}}</text>
				<text class="qr_txt">补助余额：{{obj.subsidyBalance}}</text>
				<text class="qr_txt">付款时间：{{obj.payTime}}</text>
				
				<text class="qr_txt" style="color: red;margin-top: 10px;">温馨提示: 请将该二维码放至消费机前扫描确认</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {selectOfflineQrcodeCallbackInfo} from '../../common/api/index.js';
	const qrCode = require('../../common/js/weapp-qrcode.js');
	import { showLoading, hideLoading } from '../../common/js/loading.js';
	export default {
		onLoad:function(options){
			this.orderNo = options.orderNo
			this.orgId = options.orgId
			this.empId = options.empId
		},
		data() {
			return {
				orderNo: '',
				empId: '',
				orgId: '',
				obj: {}
			}
		},
		onShow:function(){
			this._getInfo()
		},
		methods: {
			_getInfo() {
				showLoading('加载中...')
				selectOfflineQrcodeCallbackInfo({
					empId: this.empId,
					userId: uni.getStorageSync("s_userId"),
					orderNo: this.orderNo,
					loginOrgId: this.orgId
				}).then(res => {
					if(res.resultCode == 0) {
						this.obj = res
						this.couponQrCode(res.callbackQrcode)
						hideLoading()
					} else {
						hideLoading()
					}
				}).catch(err => {
					hideLoading()
					console.log(err)
				})
			},
			couponQrCode(text) {
				new qrCode('couponQrcode', {
					text,
					width: 200,
					height: 200,
					colorDark: "#333333",
					colorLight: "#FFFFFF",
					correctLevel: qrCode.CorrectLevel.L
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
	.qr_container {
		width: 100vw;
		height: 100vh;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		.qrcode {
			background: #FFFFFF;
			box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.18);
			border-radius: 10rpx;
			padding: 30rpx;
			margin-top: 100rpx;
			.qrcode_box {
				padding: 20rpx;
				display: flex;
				justify-content: center;
			}
			.qr_txt {
				font-family: 'PingFangSC';
				font-weight: 400;
				font-size: 32rpx;
				color: #6B707A;
				padding: 10rpx 0;
				text-align: center;
				width: 100%;
				display: block;
			}
		}
	}
	canvas {
		width: 400rpx;
		height: 400rpx;
	}
</style>